<template>
  <div class="content-wrapper">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="导出列表" style="height: calc(100vh - 160px)">
        <SysDownloadFiles ref="downloadRef" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="导入列表" style="height: calc(100vh - 160px)">
        <SysUploadFilesManage ref="uploadRef" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
import SysDownloadFiles from './SysDownloadFiles.vue';
import SysUploadFilesManage from '../sysuploadfiles/SysUploadFilesManage.vue';
const { proxy } = getCurrentInstance();
const activeKey = ref('1');
const uploadRef = ref();
// 监听路由变化;
watch(
  () => proxy.$route.query,
  (val) => {
    if (val.activeTab) {
      activeKey.value = proxy.$route.query.activeTab as string;
      if (val.activeTab === '2') {
        if (uploadRef.value !== undefined) {
          // 组件已经加载过了，这里路由变化时手动触发刷新
          nextTick(() => {
            uploadRef.value.getList();
          });
        }
      }
    }
  },
  { immediate: true }
);
</script>
<style lang="less" scoped>
:deep(.ant-tabs-nav-wrap) {
  padding: 0 16px;
}
</style>
